<style lang="less" scoped>
.panel {
  margin-bottom: 10px;
  &-title {
    display: flex;
    padding: 6px 10px;
    border-bottom: 0.1px solid #eaeaea;
    background: white;
    color: #3399fe;
    align-items: center;

    &__label {
      flex: 1;
      font-size: 15px;
      align-items: center;
    }
  }
  &-content {
    margin-bottom: 10px;
    background: white;

    &__item {
      display: flex;
      padding: 10px 10px 0 10px;
      font-size: 14px;
      &-label {
        color: #666;
        width: 100px;
      }
      &-value {
        flex: 1;
        padding-left: 15px;
        color: #333;
      }
    }
  }
}
</style>

<template>
  <div>
    <div class="panel">
      <!-- title -->
      <div class="panel-title">
        <div class="panel-title__label">登记信息</div>
        <div class="panel-title__right"></div>
      </div>
      <!-- content -->
      <div class="panel-content">
        <div class="panel-content__item">
          <div class="panel-content__item-label">登记编号</div>
          <div class="panel-content__item-value">{{item.RegisterNo||'-'}}</div>
          <div class="panel-content__item-right"></div>
        </div>
        <div class="panel-content__item">
          <div class="panel-content__item-label">登记日期</div>
          <div class="panel-content__item-value">{{item.RegisterDate||'-'}}</div>
          <div class="panel-content__item-right"></div>
        </div>
        <div class="panel-content__item">
          <div class="panel-content__item-label">登记机关</div>
          <div class="panel-content__item-value">{{item.RegisterOffice||'-'}}</div>
          <div class="panel-content__item-right"></div>
        </div>
      </div>
    </div>

    <template v-if="item.MPledgeDetail&&item.MPledgeDetail.PledgeeList">
      <div class="panel" v-for="(item1, index1) in item.MPledgeDetail.PledgeeList" :key="index1">
        <!-- title -->
        <div class="panel-title">
          <div class="panel-title__label">权人信息</div>
          <div class="panel-title__right">{{index1+1}}</div>
        </div>
        <!-- content -->
        <div class="panel-content">
          <div class="panel-content__item">
            <div class="panel-content__item-label">权人名称</div>
            <div class="panel-content__item-value">{{item1.Name||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">证照类型</div>
            <div class="panel-content__item-value">{{item1.IdentityType||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">证照号码</div>
            <div class="panel-content__item-value">{{item1.IdentityNo||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <!-- <div class="panel-content__item">
          <div class="panel-content__item-label">住所地</div>
          <div class="panel-content__item-value">{{item1.open_time||'-'}}</div>
          <div class="panel-content__item-right"></div>
        </div> -->
        </div>
      </div>
    </template>

    <div class="panel">
      <!-- title -->
      <div class="panel-title">
        <div class="panel-title__label">被担保主债权信息</div>
        <div class="panel-title__right"></div>
      </div>
      <!-- content -->
      <div class="panel-content">
        <div class="panel-content__item">
          <div class="panel-content__item-label">种类</div>
          <div class="panel-content__item-value">{{item.MPledgeDetail&&item.MPledgeDetail.GuaranteedCredRight&&item.MPledgeDetail.GuaranteedCredRight.Kind||'-'}}</div>
          <div class="panel-content__item-right"></div>
        </div>
        <div class="panel-content__item">
          <div class="panel-content__item-label">数额</div>
          <div class="panel-content__item-value">{{item.MPledgeDetail&&item.MPledgeDetail.GuaranteedCredRight&&item.MPledgeDetail.GuaranteedCredRight.Amount||'-'}}</div>
          <div class="panel-content__item-right"></div>
        </div>
        <div class="panel-content__item">
          <div class="panel-content__item-label">担保范围</div>
          <div class="panel-content__item-value">{{item.MPledgeDetail&&item.MPledgeDetail.GuaranteedCredRight&&item.MPledgeDetail.GuaranteedCredRight.AssuranceScope||'-'}}</div>
          <div class="panel-content__item-right"></div>
        </div>
        <div class="panel-content__item">
          <div class="panel-content__item-label">债务人履行债务的期限</div>
          <div class="panel-content__item-value">{{item.MPledgeDetail&&item.MPledgeDetail.GuaranteedCredRight&&item.MPledgeDetail.GuaranteedCredRight.FulfillObligation||'-'}}</div>
          <div class="panel-content__item-right"></div>
        </div>
        <div class="panel-content__item">
          <div class="panel-content__item-label">备注</div>
          <div class="panel-content__item-value">{{item.MPledgeDetail&&item.MPledgeDetail.GuaranteedCredRight&&item.MPledgeDetail.GuaranteedCredRight.Remark||'-'}}</div>
          <div class="panel-content__item-right"></div>
        </div>
      </div>
    </div>

    <template v-if="item.MPledgeDetail&&item.MPledgeDetail.GuaranteeList">
      <div class="panel" v-for="(item2, index2) in item.MPledgeDetail.GuaranteeList" :key="index2+100">
        <!-- title -->
        <div class="panel-title">
          <div class="panel-title__label">抵押物信息</div>
          <div class="panel-title__right">{{index2+1}}</div>
        </div>
        <!-- content -->
        <div class="panel-content">
          <div class="panel-content__item">
            <div class="panel-content__item-label">名称</div>
            <div class="panel-content__item-value">{{item2.Name||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">所有权或使用权归属</div>
            <div class="panel-content__item-value">{{item2.Ownership||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">数量、质量、状况、所在地等情况</div>
            <div class="panel-content__item-value">{{item2.Other||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">备注</div>
            <div class="panel-content__item-value">{{item2.Remark||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
        </div>
      </div>
    </template>

  </div>
</template>
<script>
export default {
  data() {
    return {
      item: {}
    };
  },
  onLoad() {
    this.getInfos();
  },
  onUnload() {
    this.item = {};
  },
  methods: {
    getInfos() {
      const item = JSON.parse(this.$route.query.item);

      this.item = item;
    }
  }
};
</script>
